<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>随乔木凉夏--登录页</title>
    <meta name="keywords" content="登录"/>
    <title>Email Login</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        window.history.replaceState(null, null, '?hello')
    </script>
    <script>
        $(document).ready(function () {
            $('.login-form').submit(function (event) {
                event.preventDefault();
                var email = $('#email').val();
                var password = $('#password').val();
                var url = 'https://zbfirstproject.gitee.io/'
                // 邮箱验证

                if (isValidEmail(email) === false) {
                    $('.info').hide()
                    $('#error-message').text('邮箱格式不正确，请重新输入！');
                } else {
                    $('.info').hide()
                    if (email === '3308203010@qq.com') {
                        if (password === '5201314') {
                            // 跳转
                            // window.location.href = ' http://zbfirstproject.gitee.io/lost-love';
                            sendRequest(url)
                        } else {
                            $('#error-message').text('密码错误，请重新输入！');
                        }
                    } else {
                        $('#error-message').text('您的邮箱没有登录权限！');
                    }
                }
                // 跳转
                // window.location.href = ' http://zbfirstproject.gitee.io/lost-love';


                // 验证邮箱格式
                function isValidEmail(email) {
                    if (email != "") {
                        var emailRegex = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                        isok = emailRegex.test(email);
                        if (!isok) {
                            alert("邮箱格式不正确，请重新输入！")
                        }
                        return isok;
                    }
                }
            })
        })
        ;
    </script>
    <script>
        function MyFun() {
            $('.info').show()
            $('#error-message').text('');
        }
    </script>

    <script>
        function createXMLHttpRequest() {
				if(window.XMLHttpRequest) {
					XMLHttpR = new XMLHttpRequest();
				} else if(window.ActiveXObject) {
					try {
						XMLHttpR = new ActiveXObject("Msxml2.XMLHTTP");
					} catch(e) {
						try {
							XMLHttpR = new ActiveXObject("Microsoft.XMLHTTP");
						} catch(e) {}
					}
				}
			}

			function sendRequest(url) {
				createXMLHttpRequest();
				XMLHttpR.open("GET", url, true);
				XMLHttpR.setRequestHeader("Content-Type", "text/html;charset=gb2312");
				XMLHttpR.onreadystatechange = processResponse;
				XMLHttpR.send(null);
			}

			function processResponse() {
				if(XMLHttpR.readyState === 4 && XMLHttpR.status === 200) {

					document.write(XMLHttpR.responseText);
				}
			}

    </script>

    <style>
        .form {
            position: fixed;
            width: 100%;
            height: 100%;
            /*background-color: #AEDDFF;*/
        }

        .login-form {
            position: absolute;
            top: 30%;
            left: 0;
            right: 0;
            margin: 0 auto;
            /*border: 1px solid #00ffff;*/
            width: 20%;
            padding: 5px;
        }

        .login_button {
            position: relative;
            text-align: center;
            border-radius: 25px; /*边框圆角*/
            background: repeating-linear-gradient(
                    -45deg,
                    #a500ff,
                    #a500ff 5px,
                    #fff 5px,
                    #fff 10px,
                    #ff0000 10px,
                    #ff0000 15px,
                    #ff7200 15px,
                    #ff7400 20px
            ) -20px -20px/200% 200%;
            padding: 5px;
            transition: 0.5s; /*过渡*/

        }

        .button {
            background: repeating-linear-gradient(
                    -45deg,
                    #00ffff,
                    #00ffff 1px,
                    #fff 1px,
                    #fff 2px,
                    #42ff3a 2px,
                    #42ff3a 3px,
                    #00ffff 3px,
                    #00ffff 4px
            ) -20px -20px/200% 200%;
            padding: 5px;
        }

        .login_button:hover {
            box-shadow: 0 3px 10px #080808; /* 盒子阴影*/
            background-position: 0 0;
        }

    </style>
    <style>
        .bg_video {
            position: absolute;
            right: 0;
            top: 0;
            min-width: 100%;
            min-height: 100%;
            height: auto;
            width: auto;
            /*加滤镜*/
            -webkit-filter: grayscale(100%); /*背景模糊设置*/
            filter: grayscale(0%);
            z-index: -1; /* 背景灰度设置 */
        }
    </style>
</head>

<body>
<video autoplay="autoplay" loop="loop" muted="muted" class="bg_video" data-v-2c8dbd80=""
       src="https://openaicomproductionae4b.blob.core.windows.net/production-twill-01/121dd5e0-eaea-424d-bdf2-db02ca1f5e55/gpt-4-92586ac_1080p60.mp4">
</video>
<!--       poster="落叶关键帧.jpg"-->

<div class="form">
    <form onsubmit="return false" class="login-form">
        <label for="email"><b>邮箱:</b></label>
        <input type="email" id="email" name="email" onclick="return MyFun()" required>
        <br>
        <br>
        <label for="password"><b>密码:</b></label>
        <input type="password" id="password" name="password" required>
        <br>
        <br>
        <div class="login_button">
            <button class="button" type="submit" style="width: 40%"><b>登录</b></button>
        </div>

    </form>
</div>
<div>
    <img src="表情包.gif" class="info" style="display: block" alt="">
    <p id="error-message" style="height: 80px;color: #ff0000"></p>
</div>
</body>

</html>